<template>
  <div>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <van-card
        v-for="item in shopCarList"
        :key="item.id"
        :num="item.count"
        :price="item.price*item.count + '.00'"
        :title="item.title"
        :thumb="item.imgUrl"
      >
        <template #footer>
          <van-stepper v-model="item.count" />
          <van-button type="danger" size="small" @click="removeGoods(item.id)">删除</van-button>
        </template>
      </van-card>

      <van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="onSubmit" />
    </van-pull-refresh>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      isLoading: false
    }
  },
  mounted() {},
  methods: {
    onRefresh() {
      this.isLoading = false
    },
    onSubmit() {},
    removeGoods(id) {
      this.$dialog.confirm({
        title: '提示',
        message: '您确定要删除吗？'
      })
        .then(() => {
            this.$store.commit('removeGoodsById', id)
            this.$toast.success('删除成功！')
        })
        .catch(() => {
            this.$toast.fail('已取消！')
        })
    }
  },
  computed: {
    ...mapState(['shopCarList', 'shopCarCount']),
    ...mapGetters(['totalPrice'])
  }
}
</script>

<style lang="less" scoped>
.van-card {
  .van-card__title {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .van-card__price {
    color: #f44;
    font-weight: 500;
  }
  .van-stepper {
    display: inline-block;
  }
}
</style>
